<template>
  <view class="user-profile-container">
    <!-- 顶部用户信息卡片 -->
    <view class="user-header">
      <view class="avatar-wrapper" @click="changeAvatar">
        <image :src="avatarUrl" class="avatar" mode="aspectFill"></image>
        <view class="edit-avatar">
          <uni-icons type="camera-filled" size="20" color="#fff"></uni-icons>
        </view>
      </view>
      <view class="nickname">{{nickname}}</view>
    </view>

    <!-- 信息面板 -->
    <view class="info-panel">
      <view class="info-item" @click="changeGender">
        <view class="info-label">
          <uni-icons type="person" size="18" color="#666"></uni-icons>
          <text>性别</text>
        </view>
        <view class="info-content">
          <text>{{gender === 0 ? '男' : '女'}}</text>
          <uni-icons type="arrowright" size="16" color="#999"></uni-icons>
        </view>
      </view>

      <view class="info-item" @click="changeSignature">
        <view class="info-label">
          <uni-icons type="compose" size="18" color="#666"></uni-icons>
          <text>个性签名</text>
        </view>
        <view class="info-content">
          <text class="signature-text">{{personSignature || '未设置'}}</text>
          <uni-icons type="arrowright" size="16" color="#999"></uni-icons>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import { mapState, mapMutations } from 'vuex'

  export default {
    computed: {
      ...mapState('my_user', ['nickname', 'gender', 'personSignature', 'avatarUrl']),
    },
    methods: {
      ...mapMutations('my_user', ['updatePreSignature', 'updateGender', 'updateAvatarUrl']),
      
      // 修改头像
      changeAvatar() {
        uni.chooseImage({
          count: 1,
          sizeType: ['compressed'],
          sourceType: ['album', 'camera'],
          success: (res) => {
            this.updateAvatarUrl(res.tempFilePaths[0]);
          }
        });
      },
      
      // 修改个性签名
      changeSignature() {
        uni.showModal({
          title: '修改个性签名',
          content: this.personSignature,
          editable: true,
          placeholderText: '请输入您的个性签名(不超过30字)',
          confirmText: '保存',
          cancelText: '取消',
          success: (res) => {
            if (res.confirm && res.content) {
              if (res.content.length > 30) {
                uni.showToast({
                  title: '签名不能超过30字',
                  icon: 'none'
                });
                return;
              }
              this.updatePreSignature(res.content);
            }
          }
        });
      },
      
      // 修改性别
      changeGender() {
        uni.showActionSheet({
          title: '选择性别',
          itemList: ['男', '女'],
          success: (res) => {
            if (!res.cancel) {
              this.updateGender(res.tapIndex);
            }
          }
        });
      }
    }
  }
</script>

<style lang="scss">
  page {
    background-color: #f7f7f7;
  }
  
  .user-profile-container {
    padding: 20rpx;
    
    .user-header {
      background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
      border-radius: 16rpx;
      padding: 40rpx 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 20rpx;
      box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
      
      .avatar-wrapper {
        width: 140rpx;
        height: 140rpx;
        border-radius: 50%;
        position: relative;
        margin-bottom: 20rpx;
        
        .avatar {
          width: 100%;
          height: 100%;
          border-radius: 50%;
          border: 4rpx solid rgba(255, 255, 255, 0.3);
        }
        
        .edit-avatar {
          position: absolute;
          right: 0;
          bottom: 0;
          width: 40rpx;
          height: 40rpx;
          background: #2575fc;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          border: 2rpx solid #fff;
        }
      }
      
      .nickname {
        font-size: 36rpx;
        font-weight: bold;
        color: #fff;
      }
    }
    
    .info-panel {
      background: #fff;
      border-radius: 16rpx;
      overflow: hidden;
      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
      
      .info-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 30rpx;
        border-bottom: 1rpx solid #f0f0f0;
        
        &:last-child {
          border-bottom: none;
        }
        
        .info-label {
          display: flex;
          align-items: center;
          font-size: 28rpx;
          color: #333;
          
          uni-icons {
            margin-right: 10rpx;
          }
        }
        
        .info-content {
          display: flex;
          align-items: center;
          
          .signature-text {
            max-width: 400rpx;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            color: #666;
            margin-right: 10rpx;
          }
        }
      }
    }
  }
</style>